﻿@model IEnumerable<BeYourMarket.Web.Extensions.TreeItem<BeYourMarket.Model.Models.Category>>

@section Styles {
    <link href="~/js/nestable/jquery.nestable.css" rel="stylesheet" />
}

@{
    ViewBag.Title = "[[[Categories]]]";
}

@helper DisplayTree(IEnumerable<BeYourMarket.Web.Extensions.TreeItem<BeYourMarket.Model.Models.Category>> categories)
{
    <ol class="dd-list">
        @foreach (var item in categories)
        {
            <li class="dd-item dd3-item" data-id="@item.Item.ID">
                <div class="dd-handle dd3-handle"></div>
                <div class="dd3-content">
                    @item.Item.Name
                    <div class="pull-right">
                        <a href="@Url.Action("CategoryUpdate", "Listing", new { id = @item.Item.ID })"><i class="fa fa-edit"></i> [[[Edit]]]</a>

                        <a href="javascript:void(0);" onclick="confirmDelete(@item.Item.ID, '@item.Item.Name');"><i class="fa fa-remove"></i> [[[Delete]]]</a>
                    </div>
                </div>
                @DisplayTree(item.Children)
            </li>
        }
    </ol>
}

<div class="wraper container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">[[[Categories]]]</h3>
                </div>

                <div class="panel-body">
                    @Html.Partial("_UserMessage")

                    <div class="alert alert-info">
                        <p>[[[Here you can add categories and subcategories. There shall always be one category for each listing.]]]</p>
                    </div>

                    <div class="row">
                        <div class="col-lg-10">
                            <a class="btn btn-primary" href="@Url.Action("CategoryUpdate", "Listing")"><i class="fa fa-plus"></i> [[[Add New]]]</a>
                        </div>
                    </div>

                    <hr />

                    <form action="@Url.Action("CategoriesUpdate", "Listing")" id="settingsForm" method="post" class="form-horizontal" role="form">
                        <input id="JsonCategories" name="JsonCategories" type="hidden" />

                        <div class="form-group">
                            <div class="col-lg-12">
                                <div class="dd nestable">
                                    @DisplayTree(Model)
                                </div>
                            </div>
                        </div>

                        <hr />

                        <div class="form-group">
                            <div class="col-lg-12">
                                <button id="submitBtn" class="btn btn-primary" type="submit"><i class="fa fa-save"></i> [[[Save]]]</button>
                                <a href="@Url.Action("Categories", "Listing")" class="btn btn-default"><i class="fa fa-remove"></i> [[[Cancel]]]</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="~/js/nestable/jquery.nestable.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.nestable')
                .nestable({
                    maxDepth: 2
                })
                .on('change', function (e) {
                    $('#JsonCategories').val(JSON.stringify($('.nestable').nestable('serialize')));
                });

            $('#JsonCategories').val(JSON.stringify($('.nestable').nestable('serialize')));
        });
    </script>

    <script type="text/javascript">
        function confirmDelete(id, title) {
            swal({
                title: "[[[Are you sure?]]]",
                text: "[[[You will delete all listings with the category ]]] " + title,
                type: "input",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "[[[Yes, delete it!]]]",
                cancelButtonText: "[[[No, cancel please!]]]",
                inputPlaceholder: "[[[Type DELETE to confirm delete]]]",
                closeOnConfirm: false,
                closeOnCancel: true
            }, function (inputValue) {

                if (inputValue === false)
                    return false;
                if (inputValue === "" || inputValue != "DELETE") {
                    swal.showInputError("[[[Type DELETE to confirm delete]]]"); return false
                }

                post('@Url.Action("CategoryDelete","Listing")', { id: id });

                swal("Deleted!", "[[[Category is deleted.]]]", "success");
            });
        }
    </script>
}

